import React from 'react';
import '../css/main.css';
import {useNavigate} from 'react-router-dom'
const fruitNames = [
    '草莓',
    '苹果',
    '香蕉',
    '葡萄',
    '水蜜桃',
    '草莓',
    '苹果',
    '香蕉',
    '葡萄',
    '水蜜桃',
    '草莓',
    '苹果',
    '香蕉'
];

const FruitSidebar = (porps) => {


    const navigate = useNavigate();  
    console.log(porps);
    return (
        <div className="fruit-sidebar">
            <div className="fresh-fruit-header">
                <span className="fresh-fruit-title">{porps.title.title}</span>
                <p className="fresh-fruit-subtitle">{porps.title.text}</p>
            </div>
            <div className="fruit-list">
                {fruitNames.map((fruit, index) => (
                    <div key={index} className="fruit-item">
                        <span className="fruit-name">{fruit}</span>
                    </div>
                ))}
            </div>
            <div className="more-fruit-btn">
                <button
                onClick={()=>{
                    navigate('/fan/list')
                }}
                >更多商品</button>
            </div>
        </div>
    );
};

export default FruitSidebar;